<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<!DOCTYPE html>

<html lang="ko">
	<head>
		<meta charset="UTF-8"/>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>Book Mark</title>
		<!--모바일 웹 페이지 설정 -->
		<link rel="shortcut icon" href="assets/ico/favicon.png" />
		<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png" />
		<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png" />
		<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png" />
		<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png" />
		<!-- bootstrap -->
		<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" />
		<!--나눔고딕 웹 폰트 적용 -->
		<link rel="stylesheet" type="text/css" href="assets/css/nanumfont.css" />
		<!--반응형 웹을 지원하지 않을 경우 -->
		<!-- <link rel="stylesheet" href="assets/css/nonresponsive.css" /> -->
		<!--IE8 이하 버전 지원 -->
		<!--[if lt IE 9]>
		<script type="text/javascript" src="assets/js/html5shiv.js"></script>
		<script type="text/javascript" src="assets/js/respond.min.js"></script>
		<![endif]-->
		<!-- IE10 반응형 웹 버그 보완 -->
		<!--[if gt IE 9]>
		<link rel="stylesheet" type="text/css" href="assets/css/ie10.css" />
		<script type="text/javascript" src="assets/js/ie10.js"></script>
		<![endif]-->
		<link rel="stylesheet" type="text/css" href="assets/font-awesome-4.0.3/css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="assets/font-awesome/css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
	
	<style type="text/css">
			.container {
				max-width: 2000px;
				padding-left: 0;
				padding-right: 0;
				margin-right: 0;
				margin-left: 0;
			}

			/*기본 속성*/
			body {
				padding-top: 50px;
				
			}

			ul, li {
				margin: 0;
				padding: 0;
				list-style: none;
			}

			/*상단바 스타일 속성*/
			nav.navbar {
				line-height: 50px;
			}

			.navbar span {
				color: #FFFFFF;
				font-size: 16px;
			}

			.nav_btns {
				width: 50px;
			}

			/*리스트 속성*/

			.list-case {
				border-bottom: 1px solid #CCCCCC;
				display: block;
			
				width: 100%;
				height: 100px;
				min-height: 100px;
				height: auto !important;
				
			}

			.alarm-thumbnail {
				
				float: left;
				height: 100%;
				width: 50px;
				text-align: center;
				min-height: 100px;
				height: auto !important;
			}

			input[type="checkbox"] {
				margin: 40px 0px 0px;
				line-height: normal;
			}
			div.list-case:after {
				content: ' ';
				display: block;
				float: none;
				clear: both;
			}

			/** section */

			.list-title {
				
				width: 100%;
				height: 33px;
				text-align: left;
				min-height: 33px;
				height: auto !important;
			}

			.list-section {
				
				width: 100%;
				height: 33px;
				text-align: left;
			}
			.list-section2 {
			    border-bottom:1.5px solid #000;
				width: 100%;
				height: 33px;
				text-align: left;
			
			}
			
			#title {
				position:fixed;
				left:33%;
			}
			#header-btn2{
				position: fixed;
				right: 0%;
				top: 10px;
			}
			
			
			.modal-dialog {

				width: 250px;
				height: 160px;
				
			    margin-top: 40px;
			    background: #FFFF00;
			}

			.modal-body {
				text-align: center;
				font-size: 15px;
				margin-top: 5px;
				
				margin-top: -10px;
			}
		

			.modal-footer button[type='button'] {
				width: 70px;
				position: relative;
				right: 15%;
			} 
			
			.list-btn1{
			float: right;
	margin-right: 5px;
			}
			
			.list-btn2 {
			  float: right;
	margin-right: 5px;
			}
			
			.list-sub{
			height: 34px;
			
			}

		.list-option{
		height: 33px;
		}
		.list-option i {
		 float:right;
		 margin-right: 20px;
		}
		</style>	
	</head>



	<body  onload="init();">
	<!-- 팝업창 -->
		<div id="myModal" class="modal fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
			<div class="modal-dialog">
				
				
				<!--내용 영역 -->
				<div class="modal-body">
					<p>
						 삭제 하시겠습니까?
					</p>
				</div>
				<!--하단 영역 -->
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">
						NO
					</button>
					<button type="button" class="btn btn-default" id="del"  >
						YES
					</button>
				</div>
			</div>
		</div>


	
	
	
	
		<!-- 상단 해더 바 -------------------------------------------------------->
		<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
			<div class="container text-center">
				<div class="pull-right">
					<button class="btn btn-inverse nav_btns" id="header-btn">
						편집
					</button>
					<button class="btn btn-inverse nav_btns" id="header-btn2" href="#myModal"  data-toggle="modal">
						삭제
					</button>
				</div>
				<span id="title">Book Mark</span>
				<div class="pull-left">
					<button class="btn btn-inverse nav_btns" onclick="history.back();">
						<i class="icon-arrow-left"></i>
					</button>
					<button class="btn btn-inverse nav_btns" id="header-btn3">
						취소
					</button>
				</div>
			</div>
		</nav>
		
		
		<div class="container" id="bookmark">
		</div>
		
		<!--Javascript -->
		<script src="assets/js/jquery.js"></script>
		<script src="assets/js/bootstrap.min.js"></script>
		<script src= "assets/js/db.js"></script>
		<script type="text/javascript" src="assets/js/string.js"></script>
		<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
		<script src="assets/js/abc.js"></script>
		<script type="text/javascript">
		$(function(){
			$("#header-btn3").hide();
			$("#header-btn2").hide();
			$(".pull-right > button:eq(0)").click(function(){
				$(this).hide(function(){
					$(".alarm-thumbnail").show();
					$(".pull-right > button:eq(1)").show();
					$(".pull-left > button:eq(0)").hide();
					$(".pull-left > button:eq(1)").show();
					$(".pull-left > button:eq(1)").click(function(){
						$(this).hide(function(){
							$(".pull-right > button:eq(1)").hide();
							$(".pull-right > button:eq(0)").show();
							$(".pull-left > button:eq(0)").show();
							$(".alarm-thumbnail").hide();
						});
					});
				});
			});		
		});
	
	
 /** 웹 디비 스크립트 */


 
</script>
	</body>
</html>
